<template>
  <div class="login_page">
    
     <div class="login_wrap">
            <div>
              <img class="logo" src="../../assets/logo.png" alt="">
            </div>
            <div>
              <h1>河北东方大学系统</h1>
            </div>
            <div>
               <el-form ref="loginForm" :model="loginObj" :rules="rules">
                <el-form-item prop="userName">
                  <el-input v-model="loginObj.userName" placeholder="请输入用户名">
                      <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                      </template>
                  </el-input>
                </el-form-item>
                <!-- 密码 -->
                  <el-form-item prop="password">
                  <el-input v-model="loginObj.password" placeholder="请输入密码" >
                      <template slot="prepend">
                        <i class="el-icon-lock"></i>
                      </template>
                  </el-input>
                </el-form-item>
                <!-- 验证码 -->
                   <el-form-item prop="veri">
                  <el-input v-model="loginObj.veri"
                   placeholder="请输入验证码">
                      <template slot="prepend">
                        <i class="el-icon-s-opportunity"></i>
                      </template>
                       <template slot="append">
                        <!-- 验证码组件 -->
                         <veriCom></veriCom>
                      </template>
                  </el-input>
              
                </el-form-item>
                 <el-form-item>
                  <div class="myitem"> 
                      <el-button type="primary">忘记密码</el-button>
                      <el-button @click="toLogin" type="success">登录</el-button>
                  </div>
                </el-form-item>
               </el-form>
            </div>
     </div>
     <bgCanvas></bgCanvas>
  </div>
</template>
<script>
// 导入验证码组件
import veriCom from './child/veriCom.vue'
// 导入canvas背景组件
import bgCanvas from './child/bgCanvas.vue';
// 导入组件需要的接口
import {checkVeriApi,loginApi} from '@/api/login'
export default {
    components:{veriCom,bgCanvas},
    data(){
      return {
        loginObj:{ //登录信息 表单收集数据的 登录接口需要
          userName:'',
          password:'',
          veri:'' //验证码
        },
        rules:{
          userName:[{ //用户名
            required:true,message:"请输入用户名",trigger:'blur'
          },{
            min:3,max:16,message:"用户名长度在3-16之间",trigger:'blur'
          }],
          password:[{
            required:true,message:"请输入密码",trigger:'blur'
          },{ //pattern 自己书写正则来校验
            pattern:/^\w{3,16}$/,message:"密码长度在3-16之间",trigger:'blur'
          }],
          veri:[{ //验证码
            required:true,message:"请输入验证码",trigger:'blur'
          }]
        }
      }
    },
    methods:{ 
      //登录方法
     toLogin(){
          // 调用整个表单的验证码
          // this.$refs.loginForm.validate 表单自带的验证方法
          this.$refs.loginForm.validate(async (vali)=>{
              // vali为true 所有表单都通过 为false 有表单没有通过、
              if(vali){ //都通过了 去调用接口
                // 先调用校验验证码 接口
                 let res=await checkVeriApi(this.loginObj.veri);
                 console.log(res,"----校验验证码接口----------")
                if(res.success){ //验证码成功了
                  // 去调用登录接口

                let loginRes=await loginApi({
                  userName:this.loginObj.userName,
                  password:this.loginObj.password
                })
                console.log(loginRes,"----登录接口----------")
                if(loginRes.success){
                  // 登录成功 将返回token 存储到vuex
                  this.$message.success("登录成功")
                  this.$store.dispatch("actToken",loginRes.tokenId)
                  // 并vuex持久化
                  // 跳转layout页
                  // replace 不产生历史记录，不能回退
                  this.$router.replace("/layout")
                }else{
                  this.$message.error(loginRes.err)
                }

                }else{
                  // elementui的轻提示
                  // this.$message({
                  //   message:"验证码错误",
                  //   type:"error",
                  //   duration:1000
                  // })
                  this.$message.error("验证码错误")
                  
                }
              }
          })
      }
    }
}
</script>
<style lang="scss" scoped>
    .login_page{
      width: 100vw;
      height: 100vh;
      background: rgba(12,24,84);
      position: relative;
      overflow: hidden;
    }
    .login_wrap{
      width: 800px;
      height: 450px;
      // background: #fff;
      position: absolute;
      top:10%;
      text-align: center;
      align-items: center;

        left: 50%;
      margin-left: -300px;
      img{
        width: 400px;
        height: 200px;
      }
      h1{
        color: white;
        font-size: 35px;
      }
      .el-input{ //输入框的长短和透明色
        width: 700px;
         color:white !important;
      }
      //  修改ui组件库 样式击穿 /deep/     写法二 ::v-deep 推荐
        ::v-deep .el-input__inner {
          background:transparent ;
          color:white !important;
        }
         ::v-deep  .el-input-group__prepend{ //图标插槽
            background:transparent ;
        }
        ::v-deep .el-input-group__append{
            padding: 0;
        }
      .myitem{
        display: flex;
        width: 800px;
        justify-content: space-between;
      }
    }
</style>